<!DOCTYPE html>
<html class="pixel-ratio-1 watch-active-state">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Required meta tags-->

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Color theme for statusbar -->
        <meta name="theme-color" content="#2196f3" />
        <meta
            name="discription"
            content="帝心畅玩是一款集合了全网好玩的传奇、仙侠、页游、手游、小说、漫画、直播等休闲娱乐于一体的APP，致力于打造专业的移动游戏休闲娱乐平台"
        />
        <!-- Your app title -->
        <title>帝心畅玩</title>
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="bookmark" href="/favicon.ico" type="imgde/x-icon" />
        <!-- Path to Framework7 Library CSS, Material Theme -->
        <link rel="stylesheet" href="./assets/css/framework7.material.css" />
        <!-- Path to Framework7 color related styles, Material Theme -->
        <link rel="stylesheet" href="./assets/css/framework7.material.colors.css" />
        <link rel="stylesheet" href="./assets/vendor/icon/css/font-awesome.min.css" />
        <link rel="stylesheet" href="./assets/vendor/toastr/toastr.min.css?v=1" />
        <!-- Path to your custom app styles-->
        <link rel="stylesheet" href="./assets/css/my-app.css" />
        <link rel="stylesheet" href="./assets/css/app.css?v=1.1" />
        <style>
            #app {
                z-index: 0;
            }

            .pay-succ-bg {
                background-color: rgba(0, 0, 0, 0.6);
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: 9999;
            }

            .app-list {
                padding: 6px;
                box-sizing: border-box;
                width: 100%;
            }

            .app-list-item {
                padding: 10px 5px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
            }

            .item-ico {
                height: 60px;
                width: 60px;
                margin: 10px 0 10px 10px;
            }

            .item-ico img {
                max-width: 100%;
                max-height: 100%;
                border-radius: 5px;
            }

            .item-des {
                flex: 1;
                text-align: left;
                color: #999;
                padding: 4px 0px;
            }

            .des-name {
                font-size: 16px;
                font-weight: bold;
                color: #000;
            }
            .des-star {
                display: flex;
            }

            .item-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 60px;
            }

            .item-btn > div {
                background-color: #fff;
                border: #63d89df2 1px solid;
                border-radius: 4px;
                color: #63d89df2;
                padding: 4px 6px;
                display: block;
            }
        </style>
    </head>

    <body class="theme-orange ccb framework7-root">
        <!-- Views -->
        <div class="views hide" id="app">
            <!-- view-main -->
            <div class="view view-main" data-page="register">
                <div class="pages navbar-fixed">
                    <!-- page-->
                    <div data-page="register" class="page navbar-fixed">
                        <!-- Top Navbar-->
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="tit">应用列表</div>
                            </div>
                        </div>
                        <!-- /End of Top Navbar-->
                        <div class="page-content">
                            <div class="content-block">
                                <div class="app-list">
                                    <template v-for="(item, idx) in list">
                                        <div class="app-list-item" :key="idx">
                                            <div class="item-ico">
                                                <img :src="item.pic_url" alt="" />
                                            </div>
                                            <div class="item-des">
                                                <div class="des-name">{{ item.name }}</div>
                                                <div class="des-small">
                                                    {{ "游戏(" + item.size + "M)" }}
                                                </div>
                                                <div class="des-star">
                                                    <star-select
                                                        :num="5"
                                                        colorclass="evaluate-star"
                                                        v-model="item.star_num"
                                                    ></star-select>
                                                    <div>| {{ item.recommend_num + "次下载" }}</div>
                                                </div>
                                            </div>
                                            <div class="item-btn">
                                                <div @click.prevent="gotoRegister(item)">下载</div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End of page-->
                </div>
            </div>
        </div>
        <!-- Path to Framework7 Library JS-->
        <script type="text/javascript" src="./assets/js/lib/lodash.js"></script>
        <script type="text/javascript" src="./assets/js/lib/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript" src="./assets/vendor/toastr/toastr.min.js?v=1"></script>
        <script type="text/javascript" src="./assets/js/tools.js?v=1.2"></script>
        <script type="text/javascript" src="./assets/js/compontent/starSelect.js"></script>
        <script>
            function showPage() {
                $("#app").removeClass("hide");
            }
            var disInt = 60;
            var vm = new Vue({
                el: "#app",
                data: function() {
                    return {
                        list: []
                    };
                },
                methods: {
                    getList() {
                        var self = this;
                        ajax.get_list({
                            param: {
                                classify_first_id: 2,
                                classify_second_id: ""
                            },
                            cb(data) {
                                self.list = data.data;
                                showPage();
                            }
                        });
                    },
                    gotoRegister(item) {
                        location.href = "register.html" + location.search;
                    }
                },
                mounted: function() {
                    this.getList();
                }
            });
        </script>
    </body>
</html>
